<template>
	<view class="index">
		<view class="index-info">
			<view>欢迎光临</view>
			<view>
				<image :src="list.avatar"></image>
				<view>
					<text>{{list.name}}</text>
					<view><span  v-for="(i,index) in list.label" style="margin-right: 10rpx;" :key="index">{{i}}</span></view>
				</view>
			</view>
			<view>
				<image src="../../static/ic_address@2x.png"></image>
				<text>{{list.address}}</text>
			</view>
		</view>
		<view class="index-detail">
			<view>餐厅环境</view>
			<!-- <image class="detail""></image> -->
			<u-swiper :list="list.piclist" height="480" @click="previewImage" name="url" :autoplay="isauto"></u-swiper>
			<view>
				<view>
					<image src="../../static/ic_time@2x.png"></image>
					<text>营业时间</text>
					<text>{{list.onlinetime}}</text>
				</view>
				<view>
					<image src="../../static/ic_call@2x.png"></image>
					<text>联系电话</text>
					<text>{{list.phone}}</text>
				</view>
			</view>
		</view>
		<view @click="handleGoOrder" class="goorder">
			<image src="../../static/ic_order@2x.png"></image>
			<text>去点菜</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isauto:false,
				list:{}
			};
		},
		onLoad() {},
		created() {
			this.getlunbo()
		},
		methods: {
			previewImage(index){
				const url = this.list.piclist.map((i) => {
					return i.url
				})
				const current = this.list.piclist[index].url
				uni.previewImage({
					current: current,
					urls: url,
					indicator: "default",
					loop: true
				})
			},
			getlunbo(){
				this.$u.post('/baseinfo/getBaseinfo').then(res=>{
					console.log(res);
					this.list=res.data.baseinfolist
					console.log(this.list);
				})
			},
			handleGoOrder() {
				uni.switchTab({
					url:'../order/order'
				})
			}
		}
	};
</script>

<style lang="scss">
	@import '../../static/css/index.scss';
	.detail{
		width: 100%;
	}
	.goorder{
		color: #fff;
		position: fixed;
		top: 80%;
		right: 0;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}
</style>
